<template>
  <view class="my-with-drawal">
    <view class="my-top">
      <view class="content">
        <u-cell-group>
          <u-cell
            @click="toPage('/pages/user/my-withdrawal-list')"
            title="提现记录"
            :isLink="true"
            arrow-direction="right"
          >
          </u-cell>
        </u-cell-group>
      </view>
      <view class="content">
        <u-cell-group>
          <u-cell @click="show1 = true" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">提现类型</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ cashTypeName || "--" }}</text>
            </view>
          </u-cell>
          <u-cell @click="show2 = true" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">提现方式</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ applyPayWay || "--" }}</text>
            </view>
          </u-cell>
          <u-cell @click="show3 = true" :isLink="true" arrow-direction="right">
            <view slot="title" class="u-slot-title1">
              <text class="u-cell3">银行卡</text>
            </view>
            <view slot="value" class="tips1">
              <text class="u-cell4">{{ bankId || "无" }}</text>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
      <view class="content flag">
        <view class="w-name">提现金额</view>
        <view class="w-line">
          <u-input
            placeholder="请输入金额"
            :maxlength="20"
            :height="40"
            type="digit"
            :focus="false"
            prefixIcon="rmb"
            prefixIconStyle="font-size: 24px;color: #333"
            v-model="cashFee"
            border="none"
          >
            <template slot="suffix">
              <text @click="getAll" class="tips no-line">全部提现</text>
            </template>
          </u-input>
        </view>
        <view class="v-num"
          >可提现金额<text class="red">{{
            cashValObj[cashTypeName] || 0
          }}</text></view
        >
      </view>
    </view>
    <view class="sub">
      <u-button
        type="primary"
        @click="toPage('/pages/user/my-card-list')"
        icon="plus"
        :plain="true"
		color="#EF684B"
        text="新加新卡"
      ></u-button>
      <u-button @click="getSubmit1" type="primary" text="下一步" color="#EF684B"></u-button>
    </view>
    <u-picker
      @cancel="show1 = false"
      @confirm="confirm1"
      @close="show1 = false"
      :show="show1"
      :columns="columns1"
    ></u-picker>
    <u-picker
      @cancel="show2 = false"
      @confirm="confirm2"
      @close="show2 = false"
      :show="show2"
      :columns="columns2"
    ></u-picker>
    <u-picker
      @cancel="show3 = false"
      @confirm="confirm3"
      @close="show3 = false"
      :show="show3"
      :columns="columns3"
    ></u-picker>
    <u-popup
      :show="showModal"
      :round="4"
      mode="center"
      closeable
      @close="closePop"
    >
      <view class="pop-content-m">
        <view class="pop-t">提现申请需要验证您的身份</view>
        <view class="pop-tips"
          >验证码发送至{{ dealNum("phone", userInfo.userName) }}</view
        >
        <view class="content1">
          <u-input
            placeholder="请输入验证码"
            :maxlength="10"
            :height="40"
            type="number"
            :focus="false"
            v-model="smsCode"
            border="none"
          >
            <template slot="suffix">
              <text @click="getCode" class="tips">{{
                tips || time + "s"
              }}</text>
            </template>
          </u-input>
        </view>
        <view class="sub1">
          <u-button
            v-if="smsCode.trim()"
            @click="getSubmit"
            type="primary"
            :text="textNew"
          ></u-button>
          <u-button v-else type="primary" disabled="disabled">{{
            textNew
          }}</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
const globalData = app.globalData;
const wxImg = globalData.wxImg;
import {
  setStoreData,
  getStoreData,
  dealNum,
  httpPost,
  httpGet,
} from "@/utils/http.js";
const pic1 = require(`@/img/my/my1.png`);
export default {
  data() {
    return {
      cashFee: "",
      smsCode: "",
      textNew: "确认提现",
      tips: "点击获取",
      time: 60,
      showModal: false,
      cardList: [],
      show3: false,
      bankId: "",
      columns3: [],
      applyPayWay: "银行卡",
      columns2: [["银行卡"]],
      show2: false,
      show1: false,
      cashTypeName: "优惠补贴", 
      columns1: [["货款", "优惠补贴", "跨界收入"]], // "消费券",
      wxImg,
      dealNum,
      pic1,
      storeInfo: {},
      userInfo: {},
      cashValObj: {},
    };
  },
  onShow() {
    this.userInfo = getStoreData("userInfo");
    this.cashValObj = getStoreData("cashValObj");
    this.getCardList();
  },
  onLoad(option) {
	  if(option.name){
		  this.cashTypeName=option.name;
	  }
  	if(option.amount){
		this.cashFee=option.amount;
	}
	
	
  },
  methods: {
    getAll() {
      if (this.cashValObj) {
        const fee = this.cashValObj[this.cashTypeName];
        if (fee && Number(fee) >= 100) {
          // const fe = Math.floor(Number(fee) / 100) * 100;
          // this.cashFee = fe;
          this.cashFee = fee;
        } else {
          // this.cashFee = 0;
          uni.$u.toast("金额不足100，不能提现");
        }
      } else {
        uni.$u.toast("金额不足100，不能提现");
        // this.cashFee = 0;
      }
    },
    getCode() {
      const _this = this;
      if (this.time < 60) {
        uni.showToast({
          title: "请在" + this.time + "s后获取",
          icon: "none", //默认success
          duration: 1500,
        });
        return;
      }
      httpGet("/api/sms/send/identity/" + this.userInfo.userName)
        .then((res) => {
          _this.tips = "";
          _this.timer = setInterval(() => {
            _this.time--;
            if (_this.time <= 0) {
              _this.time = 60;
              _this.tips = "点击获取";
              clearInterval(_this.timer);
            }
          }, 1000);
        })
        .catch((e) => {});
    },
    closePop() {
      this.showModal = false;
      // console.log('close');
    },
    getSubmit() {
      const _wx = wx;
      const _this = this;
      let bankId = "";
      // let a = this.cashFee && this.cashFee % 100;
      // if (a !== 0) {
      //   uni.$u.toast("提现金额必须是100的整数倍");
      //   return;
      // }

      this.cardList.map((i) => {
        let id =
          i.bankName +
          "(" +
          i.bankId.substring(i.bankId.length - 4, i.bankId.length) +
          ")";
        if (id === _this.bankId) {
          bankId = i.id;
        }
      });
      const parmas = {
        applyPayWay: 1, //申请提现类型（1：银行卡转账，2：支付宝转账，3：微信转账）
        bankId,
        cashFee: this.cashFee || 0,
        cashType: this.cashTypeFun(this.cashTypeName),
        smsCode: this.smsCode || "",
      };
      httpPost("/api/orderformcash/apply", parmas)
        .then((res) => {
          uni.showToast({
            title: "操作成功",
            icon: "none", //默认success
            duration: 1500,
          });
          setStoreData("refresh", true);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1, // 返回上一级页面。
            });
          }, 1500);
        })
        .catch((e) => {});
    },
    getSubmit1() {
      const b1 = /^[1-9]{1}\d{2,}$/;
      const b2 = /^(-)?\d+$/;
      if (!this.bankId) {
        uni.$u.toast("请先绑定银行卡");
      } else if (!this.cashFee || this.cashFee <= 0) {
        uni.$u.toast("请输入大于0的提现金额");
      } else if (Number(this.cashFee) > this.cashValObj[this.cashTypeName]) {
        uni.$u.toast("不能超过可提现金额");
      } else if (!(b1.test(this.cashFee) && b2.test(this.cashFee))) {
        uni.$u.toast("提现金额必须是大于100的整数");
      } else {
        this.showModal = true;
      }
    },
    toPage(v) {
      uni.navigateTo({
        url: v,
      });
    },

    cashTypeFun(v) {
      switch (v) {
        case "货款":
          return 5;
        case "优惠补贴":
          return 14;
        case "跨界收入":
          return 12;
        default:
          return 5;
      }
    },
    confirm3(e) {
      this.bankId = e.value[0];
      this.show3 = false;
    },
    confirm2(e) {
      this.applyPayWay = e.value[0];
      this.show2 = false;
    },
    confirm1(e) {
      this.cashTypeName = e.value[0];
      this.show1 = false;
    },
    toPage(v) {
      uni.navigateTo({
        url: v,
      });
    },
    getCardList() {
      const _this = this;
      httpGet("/api/userbankcard/list")
        .then((res) => {
          _this.cardList = res.data;
          const a = res.data.map((i) => {
            return (
              i.bankName +
              "(" +
              i.bankId.substring(i.bankId.length - 4, i.bankId.length) +
              ")"
            );
          });
          _this.bankId = a[0];
          _this.columns3 = [a];
        })
        .catch((e) => {
          //
        });
    },
  },
};
</script>

<style lang="scss">
.my-with-drawal {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #f8f8f8;
  width: 100vw;
  min-height: 100vh;
  padding: 16px;
  .pop-content-m {
    .pop-t {
      padding-top: 32px;
      height: 36px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #333333;
      line-height: 36px;
      margin: 6px 48px;
    }
    .pop-tips {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      margin: 6px 0;
      color: #aaaaaa;
      line-height: 36px;
      text-align: center;
    }
    .sub1 {
      margin: 36px 0 24px 0;
      /deep/.u-button {
        width: calc(100% - 48px);
        height: 50px;
        line-height: 50px;
        font-size: 16px;
      }
    }
    .tips {
      font-size: 15px;
      position: relative;
      color: #f39a15;
      height: 50px;
      line-height: 50px;
      padding-left: 16px;
      display: inline-block;
      min-width: 60px;
      text-align: center;

      &::before {
        position: absolute;
        content: "";
        width: 1px;
        left: 6px;
        top: 18px;
        height: 16px;
        background: #f39a15;
      }
    }

    .content1 {
      margin: 0 32px 16px 32px;
      border-bottom: 1px solid #eee;
      /deep/.u-input__content__field-wrapper__field {
        text-align: left !important;
      }
      /deep/.u-input {
        height: 50px;
        line-height: 50px;
        text-align: left !important;
        &:not(:last-child) {
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
  .w-line {
    border-bottom: 1px solid #eee;
  }
  .v-num {
    font-size: 13px;
    position: relative;
    .red {
      color: #f00;
      margin-left: 4px;
    }
    color: #666;
    margin-top: 8px;
  }
  .sub {
    margin: 36px 0;
    /deep/.u-button {
      width: calc(100vw - 48px);
      height: 50px;
      line-height: 50px;
      margin-bottom: 24px;
      font-size: 16px;
    }
  }
  .content {
    background: #fff;
    border-radius: 4px;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
    flex-direction: column;
    width: calc(100vw - 32px);
    .tips {
      font-size: 15px;
      position: relative;
      color: #f39a15;
      height: 50px;
      line-height: 50px;
      padding-left: 16px;
      display: inline-block;
      min-width: 60px;
      text-align: center;
      &:not(.no-line) {
        &::before {
          position: absolute;
          content: "";
          width: 1px;
          left: 6px;
          top: 18px;
          height: 16px;
          background: #f39a15;
        }
      }
    }
    &.flag {
      padding: 16px;
      .w-name {
        font-size: 14px;
        color: #666;
        margin: 0 0 16px 0;
      }
    }
    /deep/.u-cell__body {
      padding: 16px 0 !important;
    }
    /deep/.u-cell-group__wrapper {
      .u-line:first-child,
      .u-cell:last-child .u-line {
        display: none !important;
      }
    }
  }
  .u-slot-title1 {
    display: flex;
    flex-direction: column;
    .u-cell1 {
      font-size: 16px;
      line-height: 30px;
      color: #333;
    }
    .u-cell2 {
      font-size: 14px;
      margin-left: 6px;
      line-height: 30px;
      color: #f39d21;
    }
    .u-cell3 {
      font-size: 14px;
      line-height: 30px;
      color: #999;
      min-width: 50px;
    }
    .u-cell4 {
      font-size: 14px;
      line-height: 30px;
      color: #333;
    }
  }
  .my-top {
    display: flex;
    flex-direction: column;
    width: 100%;
    .ava {
      width: 40px;
      height: 40px;
      border-radius: 40px;
      overflow: hidden;
    }
  }
}
</style>
